<script lang='ts' setup>
import { ref, onMounted, onUpdated } from "vue";
import Setting from "./Setting.vue";
import { Site } from "@/config/base";
import { appNotify, NotifyType } from "@/models/app.notify";
import Prompt from "./chat/Prompt.vue";
import router from "@/router";

type MenuInfo = {
  name: string;
  href: string;
  target?: '_blank'
}

const loading = ref(true);
const currMenu = ref("");
const menus = ref([
  {
    name: "高效问答",
    href: "/chat/working-edition",
  },
  {
    name: "在线检索",
    href: "/chat/online-search",
  },
  {
    name: "随心作画",
    href: "/chat/aidraw",
  },
  {
    name: "画廊",
    href: "/media/gallery",
    target: '_blank'
  },
  {
    name: "文档分析",
    href: "/chat/documentQA",
  },
  {
    name: "思维导图",
    href: "/chat/mind-map",
  },
  {
    name: "科学快讯",
    href: "/article",
    target: '_blank'
  },
] as MenuInfo[]);

onMounted(() => {
  appNotify.addListener(NotifyType.routerChange, routerChange, "hope-header");
  routerChange();
});

function routerChange(opt?: NotifyType, msg?: string): void {
  console.log(opt, msg);
  const href = location.href;
  currMenu.value =
    msg || menus.value.find((val) => href.includes(val.href))?.href;
  loading.value = false;
}

const isSetting = ref(false);
const isMask = ref(false);

function toProductDocument(): void {
  window.location.href = Site.feishudocument;
}

function toPath(item: MenuInfo): void {
  if (item.target === '_blank') {
    window.open(location.origin + '/#' + item.href);
  } else {
    router.replace(item.href)
  }
}

</script>
<template>
  <div class="header" v-if="!loading">
    <div class="top flex">
      <div class="left flex">
        <img class="logo" src="@/assets/logo.webp" alt="zaiwen" @click="() => router.replace('/')">
        <a-menu mode="horizontal" :selected-keys="[currMenu]">
          <!-- <router-link v-for="item in menus" :key="item.href" :to="{ path: item.href, replace: true }"> -->
          <a-menu-item v-for="item in menus" :key="item.href" @click="toPath(item)">
            <icon-computer class="icon" v-if="item.href === '/chat/working-edition'" />
            <icon-mobile class="icon" v-else-if="item.href === '/chat/youth-version'" />
            <icon-robot class="icon" v-else-if="item.href === '/chat/aidraw'" />
            <icon-mind-mapping class="icon" v-else-if="item.href === '/chat/mind-map'" />
            <icon-file class="icon" v-else-if="item.href === '/chat/documentQA'" />
            <icon-palette class="icon" v-else-if="item.href === '/media/gallery'" />
            <icon-fire class="icon" style="color:red" v-else-if="item.href === '/article'" />
            {{ item.name }}
          </a-menu-item>
          <!-- </router-link> -->
        </a-menu>
      </div>
      <div class="right flex">
        <div class="menu" @click="toProductDocument" style="color: #d97a00; font-size: 15px;font-weight: 600;">使用指南</div>
        <Theme :show="true" class="icon"></Theme>
        <div class="menu" @click="isSetting = true">
          <icon-settings size="20" />
        </div>
        <!-- <div class="menu"><router-link to="/login">登录</router-link></div> -->
      </div>
    </div>

    <div class="tip flex">
      <a class="text flex" href="https://gitee.com/xu-zhanwei/chatanywhere/blob/master/Support.md" target="_blank">
        <icon-face-smile-fill size="20" />
        <span>点击此处支持项目后续开发</span>
      </a>
      <!-- <div class="prompt" v-show="$route.path == '/chat/working-edition'" @click="isMask = true">
        <icon-message size="20" />
      </div> -->
      <!-- <div class="feedback flex-c">
        <a href="https://wj.qq.com/s2/12975626/ab4f/" target="_blank" rel="noopener noreferrer">
          <icon-bug class="icon" />
        </a>
        <a href="https://wj.qq.com/s2/12975034/ea14/" target="_blank" rel="noopener noreferrer">
          <icon-thunderbolt class="icon" />
        </a>
      </div> -->

    </div>
    <a-modal fullscreen v-model:visible="isSetting" title="全局设置" @cancel="isSetting = false" :footer="false">
      <Setting />
    </a-modal>

    <a-drawer :width="340" title="Prompt" v-model:visible="isMask" @cancel="isMask = false" unmountOnClose
      :footer="false">
      <Prompt />
    </a-drawer>
  </div>
</template>
<style lang='scss' scoped>
.header {
  background: var(--color-bg-2);
  color: var(--color-text-2);
  border-bottom: 1px solid var(--color-neutral-4);
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 9;

  .top {
    width: 100%;
    justify-content: space-between;

    .left {
      flex: 1;

      .logo {
        height: 30px;
        margin-left: 20px;
        margin-right: -10px;
        z-index: 1;
        cursor: pointer;
      }

      .icon {
        margin-right: 2px;
      }
    }

    .right {
      padding: 14px 20px;
    }

    .menu {
      margin: 0 10px;
      cursor: pointer;

      &.mask {
        display: none;
      }

      @media screen and (max-width: 1200px) {
        &.mask {
          display: block;
        }
      }
    }
  }

  .tip {
    width: 100%;
    padding: 7px;
    text-decoration: none;
    background: var(--color-neutral-4);

    .text {
      flex: 1;
      text-align: center;
      justify-content: center;
      color: rgb(var(--arcoblue-7));
      opacity: 0.7;

      span {
        margin: 0 10px;
      }
    }

    .prompt {
      height: 100%;
      margin-right: 10px;
      cursor: pointer;
    }

    .feedback {
      position: fixed;
      top: 50%;
      right: 10px;

      .icon {
        font-size: 20px;
        background-color: var(--color-neutral-8);
        color: var(--color-neutral-1);
        padding: 10px;
        box-sizing: content-box;
        border-radius: 3px;
        margin: 2px;
        cursor: pointer;
      }

      @media screen and (max-width: 1200px) {
        right: 3px;

        .icon {
          font-size: 17px;
          padding: 7px;
        }
      }
    }

    .qr-code {
      a {
        width: 20px;
        overflow: hidden;

        .qr {
          width: 20px;
          object-fit: contain;
        }
      }
    }
  }
}
</style>
